<script setup lang="ts">
defineOptions({
  name: "energyBord"
});
import { markRaw, ref, computed, onMounted, nextTick } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import consume_all from "@/assets/svg/energy/consume_all.svg?component";
import consume_fab from "@/assets/svg/energy/consume_fab.svg?component";
import consume_fp from "@/assets/svg/energy/consume_fp.svg?component";
import consume_life from "@/assets/svg/energy/consume_life.svg?component";
import elec_co2 from "@/assets/svg/energy/elec_co2.svg?component";
import elec_mei from "@/assets/svg/energy/elec_mei.svg?component";
import elec_money from "@/assets/svg/energy/elec_money.svg?component";
import elec_used from "@/assets/svg/energy/elec_used.svg?component";
import icon_electricity from "@/assets/svg/energy/icon_electricity.svg?component";
import icon_water from "@/assets/svg/energy/icon_water.svg?component";
import icon_cost from "@/assets/svg/energy/icon_cost.svg?component";
import icon_steam from "@/assets/svg/energy/icon_steam.svg?component";
import icon_ng from "@/assets/svg/energy/icon_ng.svg?component";
import icon_hot from "@/assets/svg/energy/icon_hot_water.svg?component";
import icon_gas from "@/assets/svg/energy/icon_gas.svg?component";
import icon_diesel from "@/assets/svg/energy/icon_diesel.svg?component";

const iconComList = {
  icon_electricity: markRaw(icon_electricity),
  icon_water: markRaw(icon_water),
  icon_cost: markRaw(icon_cost),
  icon_steam: markRaw(icon_steam),
  icon_ng: markRaw(icon_ng),
  icon_hot: markRaw(icon_hot),
  icon_gas: markRaw(icon_gas),
  icon_diesel: markRaw(icon_diesel)
};

interface Props {
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  imageSize?: number;
  /**  数据列表 */
  dataList?: any[];
}

interface Emits {
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const props = withDefaults(defineProps<Props>(), {
  width: 667,
  height: 292,
  imageSize: 100
});

const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

onMounted(() => {
  emits("request-data");
});
</script>

<template>
  <div class="energy-desk-content">
    <modelTitle v-if="title" :title="title" />
    <px-scrollbar>
      <div class="energy-desk-content-list">
        <div v-for="data in dataList" :key="data.icon" class="content-item">
          <div class="content-item-left">
            <component :is="iconComList[data?.icon]" class="content-icon color-total" />
            <div class="content-box">
              <div class="content-box-label">{{ data?.name }}</div>
              <div>
                <div class="content-box-data">
                  <span class="data-text">{{ data?.cost || "--" }}{{ data?.unit }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="content-item-right">
            <div class="item-right">
              <span>同比</span>
              <span :style="{ color: data.costYoy > 0 ? '#FF0000' : '#34D399' }">
                {{ data.costYoy > 0 ? "+" : "" }}
                {{ `${data.costYoy != null ? data.costYoy : "-"}%` }}
              </span>
            </div>
            <div class="item-right">
              <span>环比</span>
              <span :style="{ color: data.costMom > 0 ? '#FF0000' : '#34D399' }">
                {{ data.costMom > 0 ? "+" : "" }}
                {{ `${data.costMom != null ? data.costMom : "-"}%` }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </px-scrollbar>
    <div v-if="!(dataList && dataList.length)" class="echarts-empty">
      <px-empty :image-size="imageSize" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  box-sizing: border-box;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  min-height: v-bind(min_height);
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgb(0 37 86 / 12%);

  .energy-desk-content-list {
    display: flex;
    flex-flow: column wrap;
    gap: 30px;
    align-items: flex-start;
    margin-top: 30px;

    .content-item {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .content-item-left {
        display: flex;
        gap: 16px;

        .color-done {
          color: $colorDone;
        }

        .color-total {
          color: $colorTotal;
        }

        .content-icon {
          width: 44px;
          height: 44px;
        }

        .data-text {
          font-size: 16px;
          font-weight: 600;
          line-height: 1;
          white-space: nowrap;
        }

        .content-box {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .content-box-label {
            font-weight: 600;
            line-height: 1;
            color: #555;
            white-space: nowrap;
          }

          .content-box-data {
            display: flex;
            align-items: center;
          }
        }
      }

      .content-item-right {
        display: flex;
        flex-flow: column nowrap;
        gap: 5px;

        .item-right {
          font-size: 14px;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
